<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      .malware {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: red;
        color: black;
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
        font-size: 72px;
      }
    </style>
    <script>
      function xssAttack() {
        const div = document.createElement('div');
        div.id = 'the-malware';
        div.className = 'malware';
        div.innerHTML = 'XSS Succeeded';
        document.getElementsByTagName('body')[0].appendChild(div);
        throw new Error('XSS Succeeded');
      }
    </script>
  </head>
  <body>
    <pre class="mermaid">
      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
      graph LR
          A --> B
    </pre>
    <pre class="mermaid">
      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
      %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
      graph LR
          A --> B
    </pre>
    <pre class="mermaid">
      %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
      %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
      sequenceDiagram
      Alice->>Bob: Hi Bob
      Bob->>Alice: Hi Alice
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        startOnLoad: true,
        useMaxWidth: true,
      });
      let cnt = 0;
      let a;
      const handler = setInterval(() => {
        cnt++;
        a = {};
        if (a.polluted !== undefined) {
          clearInterval(handler);
          xssAttack();
        }
        if (cnt > 20) {
          clearInterval(handler);
        }
      }, 100);
    </script>
  </body>
</html>
